<!--柱模版 -->
<template>
  <div id="Index">
    <el-container style="height: 100vh" class="nav_1">
      <el-aside :width="isCollapse ? '64px' : '200px'"
        ><el-navMenu></el-navMenu
      ></el-aside>
      <el-container>
        <el-header height="100px"><el-headerList></el-headerList></el-header>
        <el-main><el-content></el-content></el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
//引入布局组件
const NavMenus = () => import("@/layout/NavMenu.vue");
const contentList = () => import("@/layout/Content.vue");
const headerList = () => import("@/layout/Header.vue");
import { mapState } from "vuex";
import { getAllInfo } from "@/network/api/article";
import { getCookie } from "@/utils/cookie";
import { setStorage } from "@/utils/html5";

export default {
  name: "Index",
  data() {
    return {};
  },
  computed: {
    ...mapState("article", ["isCollapse"]),
    // isShow() {
    //   return isCollapse;
    // },
  },
  components: {
    "el-navMenu": NavMenus,
    "el-content": contentList,
    "el-headerList": headerList,
  },
  async created() {
    let token = getCookie("_token");
    let res = await getAllInfo(token);
    console.log(res);
    let permission = res.data.data.permissionsList;
    setStorage("_permissionsList", permission);
  },
};
</script>

<style scoped>
#Index {
  width: 100%;
  height: 100%;
}
.el-header {
  color: #333;
  padding: 0;
}

.el-aside {
  background-color: rgb(0, 21, 41);
  color: #333;
  /* line-height: 200px; */
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  padding: 0 20px 20px 20px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
.nav_1 {
  height: 100%;
}
</style>